<template>
  <div ref="container" class="container">
    <div class="messages">
      <div class="message" v-for="(msg,idx) in messages" track-by="msgId">
        <div v-if="!msg.hiddenDate" class="datetime" v-text="msg.dateText"></div>
        <div :class="[msg.sender == rightUser.userId ? 'right':'left']">
          <div class="avatar">
            <img v-if="leftUser && leftUser.avatar" :src="leftUser.avatar" />
            <i v-else class="el-icon-s-custom" />
          </div>
          <div class="content">
            <div class="text">{{msg.msg}}</div>
            <div class="corner"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getRelativeTime} from "@/libs/tools";

export default {
  name: "msg-box",
  props:{
    leftUser:{
      type:Object,
      default: {}
    },
    rightUser:{
      type:Object,
      default: {}
    }
  },
  data(){
    return {
      messages:[],
      isLoading: false,
      scrollTimer: null
    }
  },
  mounted() {
    this.scrollToBottom()
  },
  methods:{
    resetMessages(arr){
      this.calculateTimeTexts(arr)
      this.$set(this,'messages',arr)
      this.scrollToBottom()
    },
    loadMessages(arr){
      this.calculateTimeTexts(arr)
      this.messages.push(arr)
    },
    handleNewMessage(obj){
      this.calculateTimeText(obj)
      this.messages.push(obj)
      this.scrollToBottom()
    },
    calculateTimeTexts(arr){
      if(arr.length > 0){
        let lastMsgDate = -180000
        arr.forEach(function (item,index) {
          if(item.date < lastMsgDate + 180000){
            item.hiddenDate = true
          }else {
            item.dateText = getRelativeTime(item.date)
            lastMsgDate = arr[index].date
          }
        })
      }
    },
    calculateTimeText(obj){
        if(this.messages.length == 0) {
         return
        }
        let lastMsgDate = this.messages[this.messages.length - 1].date
        if(obj.date < lastMsgDate + 180000){
          obj.hiddenDate = true
          return
        }
        obj.dateText = getRelativeTime(obj.date)
    },
    scrollToBottom(){
      this.$nextTick(function (){
        this.$refs.container.scrollTop = this.$refs.container.scrollHeight
      })
    }
  }
}
</script>

<style scoped lang="less">
  .container {
    background: #F5F5F5;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .loading {
      text-align: center;
      line-height: 34px;
      overflow: hidden;
      //box-shadow: 2px 2px 100px rgba(0,0,0,0.5) inset;
      transition: all .6s ease-in-out;
      height: 34px;

      &.hidden{
        box-shadow: none;
        height: 1px;
      }

      span {
        font-size: 14px;
        color: #888888;
      }
    }
    .messages {
      min-height: 100%;
      .message {
        &:first-child {
          padding-top: 10px;
        }
        .datetime {
          text-align: center;
          color: #888888;
          font-size: 12px;
        }
        .left {
          display: flex;
          padding: 5px;
          line-height: 40px;
          text-align: left;
          .avatar {
            margin-right: 10px;
            width: 40px;
            height: 40px;
            text-align: center;
            img {
              width: 100%;
              height: 100%;
              border-radius: 6px;
            }
            i {
              font-size: 24px;
            }
          }
          .content {
            flex: 1;
            position: relative;
            .text {
              background: #FFF;
              display: inline-block;
              padding: 5px 10px;
              border-radius: 4px;
              line-height: 25px;
              word-break: break-all;
              max-width: 80%;
              white-space: pre-line;
            }
            .corner {
              position: absolute;
              left: -16px;
              top: 8px;
              border: 10px solid;
              border-color: transparent #FFF transparent transparent;
            }
          }
        }
        .right {
          display: flex;
          flex-direction: row-reverse;
          padding: 5px;
          .avatar {
            margin-left: 10px;
            line-height: 40px;
            width: 40px;
            height: 40px;
            text-align: center;
            img {
              width: 100%;
              height: 100%;
              border-radius: 6px;
            }
            i {
              font-size: 24px;
            }
          }
          .content {
            flex: 1;
            position: relative;
            text-align: right;

            .text {
              background: #7cfc00;
              display: inline-block;
              padding: 5px 10px;
              border-radius: 4px;
              line-height: 25px;
              word-break: break-all;
              text-align: left;
              max-width: 80%;
              white-space: pre-line;
            }
            .corner {
              position: absolute;
              right: -16px;
              top: 8px;
              border: 10px solid;
              border-color: transparent transparent transparent #7cfc00;
            }
          }
        }
      }
    }
  }
</style>
